<template>
    <div class="record_game_review">
        <div class="title_box">
            <div class="game_title">HHNL德州扑克$0.01/$0.02-#HD1857455270</div>
            <div class="options">
                <div class="option_item" v-for="(item, index) in optionList" :key="index"
                  @click="handleOptionClick(item.action)">
                    {{ item.icon }}
                </div>
            </div>
        </div>
        0000000000
        <div class="video" v-if="selectItem.src">
            <video :src="selectItem.src" controls preload="auto" muted></video>
        </div>
        <!-- 表格数据，可能要根据id请求 -->
        <div class="table record_page" v-if="modalType === 1">
            <TabForm :loading="state.loading" :columns="columns" :data="data" :pageData="state.pageData"
              @page-Change="(p: any) => queryData(p)">
            </TabForm>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import TabForm from '@/components/TabForm.vue'


const { t } = useI18n();

// 接收父组件传递的 props
const props = defineProps({
    selectItem: {
        type: Object,
        required: true,
    },
    modalType: {
        type: Number,
        required: true,
    },
});


const optionList = computed(() =>
    props.modalType === 0
        ? [{ icon: '▶️', action: 'play' }]
        : [
            { icon: '✏️', action: 'edit' },
            { icon: '❌', action: 'delete' },
            { icon: '🔍', action: 'view' },
            { icon: '📊', action: 'analyze' },
        ]
);

const handleOptionClick = (action: string) => {
    console.log(`执行操作: ${action}`);
};

const columns = computed(() => {
    return [
        {
            title: t('auditRecord_page_startTime'), key: 'pay_time', align: 'center',
            render() {
                return 111;
            }
        }, {
            title: t('auditRecord_page_startTime'), key: 'pay_time', align: 'center',
            render() {
                return 111;
            }
        }, {
            title: t('auditRecord_page_startTime'), key: 'pay_time', align: 'center',
            render() {
                return 111;
            }
        },
    ];
})

const data = ref([
    { id: 1, name: 'Record 1', action: 'View' },
    { id: 2, name: 'Record 2', action: 'Edit' },
]);
const state = reactive({
    loading: false,
    pageData: {
        currentPage: 1,
        pageSize: 10,
        total: 20,
    }
});

const queryData = (page?: any) => { // 查询
    // 充值
    // MessageEvent2.addMsgEvent(
    // );
    state.pageData.currentPage = page || 1
    // 发送请求
}

</script>

<style lang='less' scoped>
@import '@/assets/recordPage.less';

.record_game_review {
    padding: 30px;

    .title_box {
        display: flex;
        justify-content: space-between;

        .game_title {
            color: #AFB6BD;
            font-size: 16px;
        }

        .options {
            display: flex;
            align-items: center;

            .option_item {
                width: 18px;
                height: 18px;
                margin-left: 10px;
            }
        }
    }

    .video {
        video {
            width: 100%;
            max-height: 420px;
        }
    }

    .table {
        margin-top: 20px;
    }
}
</style>
